<template>
  <div class="tags_box">
    <el-tag :key="tag.path" type="card" v-for="tag in dynamicTags" :closable="dynamicTags.length>1" :disable-transitions="false"
      @close="handleClose(tag)" @click="handleClick(tag)" :class="{'active': isActive(tag.path,tag.name)}">
      {{tag.name}}
    </el-tag>
  </div>
</template>

<script>
  import {
    mapState,
    mapGetters
  } from "vuex";
  import CloudSystem from '@/router/cloudSystem.js'
  export default {
    name: "questions",
    data() {
      return {
        collapseLost: CloudSystem,
        activeName: 1,
        tableData: [{}],
        dialogTableVisible: false,
        dynamicTag: [], // tab 列表
      }
    },
    components: {

    },
    computed: {
      ...mapGetters({
        dynamicTags: ["dynamicTags"],
      }),
    },
    created() {
      // console.log(CloudSystem)
      // this.dynamicTag = JSON.parse(JSON.stringify(this.dynamicTags))
      // console.log(this.dynamicTag)
    },
    mounted() {
      // console.log(CloudSystem)
    },
    methods: {
      isActive(path, name) {
        // console.log(name)
        // console.log(this.$route.name)
        //				return path === this.$route.fullPath;
        return name === this.$route.name;
      },
      handleClick(tag) {
        this.$router.push({
          path: tag.path
        });
      },
      handleClose(targetName) {
        this.dynamicTag = JSON.parse(JSON.stringify(this.dynamicTags))
        // console.log(targetName)
        // console.log(this.dynamicTag.indexOf(targetName))
        for (var i = 0; i < this.dynamicTag.length; i++) {
          if (this.dynamicTag[i].path == targetName.path) {
            // console.log(i)
            // this.dynamicTag.splice(i, 1); //删除下标为i的元素
            // if(this.dynamicTag.length == 1) {
            // 	return;
            // }
            const delItem = this.dynamicTag.splice(i, 1)[0];
            console.log(delItem)
            const item = this.dynamicTag[i] ? this.dynamicTag[i] : this.dynamicTag[i - 1];
            if(item) {
              console.log(item)
            	delItem.path === this.$route.fullPath && this.$router.push(item.path);
            } else {
            	this.$router.push('/customerDetails/customerDetails');
            }
          }
        }
        // console.log(this.dynamicTag)
        // this.dynamicTag.splice(this.dynamicTag.indexOf(targetName), 1);
        let arr = JSON.parse(JSON.stringify(this.dynamicTag));
        // console.log(arr)
        this.$store.commit(this.$types.DYNAMICTAGS, arr);
        // if (this.dynamicTag.length == 1) {
        //   this.$router.push({
        //     path: this.dynamicTag[0].path
        //   });
        // }

      }
    },
    watch: {

    }
  }
</script>


<style lang="less" scoped="scoped">
  .tags_box {
    margin: 22px 0 18px;
    height: 50px;
    line-height: 50px;
    background: #FFFFFF;
    box-shadow: 0px 0px 10px 0px #E5E9EF;
    border-radius: 10px;
    box-sizing: border-box;
    padding-left: 18px;

    /deep/.el-tag.active {
      color: #338AFF;

      .el-tag__close:hover {
        background: #409eff;

        &::before {
          color: #fff;
        }
      }

      .el-icon-close::before {
        color: #338AFF;
      }
    }

    /deep/.el-tag {
      margin-right: 10px;
      cursor: pointer;
      background: none;
      border: none;
      color: #222222;

      .el-icon-close::before {
        color: #222222;
      }

      .el-tag__close:hover {
        background: #EDEDED;
      }
    }
  }
</style>
